<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与监视属性的区别</title>
</head>
<body>
    <div id="app">
      <h3>计算属性与监视属性实现姓名案例异步效果</h3>
      <h4>计算属性</h4>
      <p>姓：<input type="text" v-model="lastName"></p>
      <p>名：<input type="text" v-model="firstName"></p>
      <p>全名：{{full}}</p>
      <br>
      <br>
      <hr>
      <h4>监视属性</h4>
      <p>姓：<input type="text" v-model="lastName"></p>
      <p>名：<input type="text" v-model="firstName"></p>
      <p>全名：<input type="text" v-model="fullName"></p>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
      const vm=new Vue({
        el:"#app",
        data(){
          return{
            firstName:"三",
            lastName:'张',
            fullName:"张-三"
        }
        },
        //使用监视属性实现延时显示的效果
        watch:{
          firstName(val){
            setTimeout(()=>{
              this.fullName=this.lastName+"-"+val
            },1000)
          },
          lastName(val){
            setTimeout(()=>{
              this.fullName=val+"-"+this.firstName
            },1000)
          }
        },
        //使用计算属性实现
        computed:{
          full(){
            return this.lastName+"-"+this.firstName
          }
        }
      })
    </script>
</body>
</html>
